<!--
  Component Custom Styling Component

  Customizing styles of CesiumJS components
  
  Category: Intermediate

  Component Documentation:
  ========================

  Title: Component Custom Styling
  Description: Customizing styles of CesiumJS components
  Features:
    - Shows how to create custom materials for polygons
    - Demonstrates styling of polylines with glow effects
    - Provides examples of point entity customization
    - Shows how to style billboard entities
    - Demonstrates 3D Tileset styling based on properties
    - Provides examples of label styling
  Author: CesiumJS Demo Project
  Date: Today's Date
-->

<template>
  <BaseCesiumViewer 
    ref="cesiumViewer" 
    :options="viewerOptions"
    @viewer-ready="onViewerReady"
  />
</template>

<script>
import { ref } from 'vue';
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';

export default {
  name: 'ComponentCustomStyling',
  components: {
    BaseCesiumViewer
  },
  setup() {
    const cesiumViewer = ref(null);
    
    const viewerOptions = {
      animation: true,
      timeline: true,
      vrButton: true,
      geocoder: true,
      homeButton: true,
      navigationHelpButton: true,
      scene3DOnly: false
    };

    // This function is called when the Cesium viewer is ready
    const onViewerReady = async (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      const { viewer, Cesium } = payload;
      
      try {
        // Create a polygon with custom material
        viewer.entities.add({
          name: 'Red polygon with custom material',
          polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray([
              -107.0, 40.0,
              -105.0, 40.0,
              -105.0, 38.0,
              -107.0, 38.0
            ]),
            material: new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.5)),
            outline: true,
            outlineColor: Cesium.Color.BLACK
          }
        });

        // Create a polyline with custom styling
        viewer.entities.add({
          name: 'Custom styled polyline',
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([
              -108.0, 40.0,
              -106.0, 38.0
            ]),
            width: 5,
            material: new Cesium.PolylineGlowMaterialProperty({
              color: Cesium.Color.CYAN,
              glowPower: 0.25
            })
          }
        });

        // Create a point with custom styling
        viewer.entities.add({
          name: 'Custom styled point',
          position: Cesium.Cartesian3.fromDegrees(-106.0, 39.0),
          point: {
            pixelSize: 15,
            color: Cesium.Color.YELLOW,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 3
          }
        });

        // Create a billboard with custom styling
        viewer.entities.add({
          name: 'Custom styled billboard',
          position: Cesium.Cartesian3.fromDegrees(-104.0, 39.0),
          billboard: {
            image: './images/logo.png',
            scale: 0.5,
            color: Cesium.Color.WHITE
          }
        });

        // Load a 3D Tileset and apply custom styling
        try {
          const tileset = await Cesium.Cesium3DTileset.fromUrl('/SampleData/Cesium3DTiles/Batched/BatchedColors/tileset.json');
          viewer.scene.primitives.add(tileset);

          // Zoom to the tileset
          viewer.zoomTo(tileset);

          // Style the tileset based on properties
          tileset.style = new Cesium.Cesium3DTileStyle({
            color: {
              conditions: [
                ['${id} > 5', 'color("red")'],
                ['${id} > 2', 'color("yellow")'],
                ['true', 'color("blue")']
              ]
            }
          });
        } catch (error) {
          console.log('Error loading tileset:', error);
        }

        // Add a label with custom styling
        viewer.entities.add({
          name: 'Custom styled label',
          position: Cesium.Cartesian3.fromDegrees(-104.0, 38.0),
          label: {
            text: 'Custom Label',
            font: '24px sans-serif',
            fillColor: Cesium.Color.WHITE,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 2,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, -10)
          }
        });

        console.log('Component Custom Styling demo loaded successfully');
      } catch (error) {
        console.error('Error in ComponentCustomStyling demo:', error);
      }
    };

    return {
      cesiumViewer,
      viewerOptions,
      onViewerReady
    };
  }
};
</script>

<style scoped>
/* 
  Component Styles
  Add any custom styles for your demo here
*/
</style>